<!--
* @name: 组织机构
-->
<template>
  <div style="height: 100%;">
    <div flex v-loading="windowLoading" style="height: 100%;">
      <base-layout title="组织机构" style="width:260px;overflow: auto;" :bottonShow="false" :isPage="false"
                   :operateButtonSwitch="false" :mainColor="mainColor">
        <div slot="main" style="height: 100%;border-right: 1px solid #dfe6ec;overflow-y: auto;">
          <base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
                     :menuData="menuData" @handleNodeClick="treeNodeClick"></base-tree>
        </div>
      </base-layout>
      <base-layout title="机构编辑区" :bottonShow="false" :isPage="false" :buttonList="buttonList" style="flex:1; "
                   :defaultButtonSwitch="false" @onFuncBtn="getFuncBtn">
        <div slot="main" style="width: 100%;height: 100%; padding: 0 20px;">
          <base-form ref="customForm" :formRow="orangformRow" :isFunBtn="isFunBtn" @elDialogClick="elDialogClick"
                     class="form-control" @onSubmit="getSubmit" v-loading="formLoading">
          </base-form>
        </div>
      </base-layout>
    </div>
    <!-- 机构选择 -->
    <base-organization ref="baseOrganization" :dialogVisible="organizationDialog" :menuData="menuData"
                       @handleConfirmClick="handleConfirmClick"></base-organization>
    <!-- 负责人 -->
    <base-person ref="basePerson" :menuData="menuData" :tableColumn="tableColumn"
                 @personConfirmClick="personConfirmClick"></base-person>
  </div>
</template>

<script>
import { authApi } from "@/api/apis/auth";
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseOrganization from "@/components/base/baseOrganization/index.vue";
import basePerson from "@/components/base/basePerson/index.vue";
import configData from "./configData";
import { getCompanyId } from '@/utils/auth'
import {
  GetOrganTree,
  OrganGetBillData,
  OrganSaveData,
  OrganDelData
} from '@/api/apis/organization'
import {
  PersonList
} from '@/api/apis/personnelSettings'
export default {
  name: 'organization',
  components: {
    baseLayout,
    baseTree,
    baseForm,
    baseDialog,
    baseTable,
    baseOrganization,
    basePerson
  },
  data() {
    return {
      radioIndex: false,
      windowLoading: false,
      formLoading: false,
      selectForm: {
        P_PersonName: '',
        P_PersonID: ''
      },
      theme: '',
      personLoading: false, //人员加载
      // topmainHight: 'calc(100% - 41px)', //内容高度
      orangMainHight: 'calc(100% - 38px)', //组织弹框高度
      orangHight: 'calc(100% - 38px)', //组织高度
      organizationDialog: false, //选择组织机构弹窗
      mainColor: '#f8f8f8 ', //背景颜色
      buttonList: [{
        'icon': 'el-icon-plus',
        'menuName': '新增根节点'
      }, {
        'icon': 'el-icon-plus',
        'menuName': '新增子节点'
      }, {
        'type': 'danger',
        'menuName': '删除',
        'icon': 'el-icon-delete'
      },], //按钮
      menuData: [], //树状图数据
      ruleForm: {}, //参数
      orangformRow: configData.formRow, //表头
      isFunBtn: true,
      organizationForm: {},
      // 分页数据
      delId: '',
      delData: []
    }
  },
  watch: {

  },
  computed: {
    // 表头配置
    tableColumn() {
      return configData.tableColumnJson
    },
  },
  mounted() {
    this.initPage()
  },
  methods: {
    // 单选
    radioChange(val) {
      this.radioIndex = val.index
      this.selectForm.P_PersonName = val.P_PersonName
      this.selectForm.P_PersonID = val.P_PersonID
    },
    //页面初始化
    initPage() {
      this.delId = ""
      this.windowLoading = true
      setTimeout(() => {
        this.windowLoading = false
      }, 3000)
      // this.$nextTick(() => {
      // 	this.$refs.customForm.resetForm('ruleForm')
      // })
      this.getMenuData()
    },
    // 树状图点击
    treeClick(data) {
      this.pageModel.departmentID = data.id
      this.radioIndex = false
    },
    async getMenuData() {
      this.$refs.baseTree.treeLoading = true
      setTimeout(() => {
        this.$refs.baseTree.treeLoading = false
      }, 3000)
      let params = {
        // CompanyID: "46"
        // CompanyID: this.$store.state.user.companyID ? this.$store.state.user.companyID : getCompanyId()
      }
      let res = await authApi("sysOrganService","","queryEntityTree","",{})
      console.log(res,'res')
      this.menuData = res.attribute
      this.$refs.baseTree.treeLoading = false
      this.windowLoading = false

    },
    async getInfo(id) {
      this.formLoading = true
      setTimeout(() => {
        this.formLoading = false
      }, 3000)
      let params = {
        id: id
      }
      let res = await authApi("sysOrganService","","getEntity","",params)
      this.ruleForm = res.attribute
      this.ruleForm.parentOrganName = res.attribute.parentOrganName
      this.$nextTick(() => {
        this.$refs.customForm.choiceAssignment(this.ruleForm)
        this.formLoading = false
      })
    },
    // 选择框点击事件
    elDialogClick(row, index, indexRow) {
      this.organizationForm = {
        // o_OrganCode: '',
        // O_OrganID: '',
        // ParentOrganName: '',
        // O_ParentOrganID: '',
        // ParentOrgainName: '',
      }
      if (row.label == '上级机构') {
        // this.organizationDialog = true
        this.$refs.baseOrganization.dialogVisible = true
      }
      if (row.label == '负责人') {
        this.$refs.basePerson.personDialog = true
      }

    },
    // 点击事件
    treeNodeClick(data) {
      this.getInfo(data.id)
      this.delId = data.id
      // this.$refs.customForm.getField(data)
    },
    getSubmit(data) {
      let params = {
        ...data
      }
      params.o_OrganID = params.o_OrganID ? params.o_OrganID : 0
      params.o_ParentOrganID = params.o_ParentOrganID ? params.o_ParentOrganID : 0
      this.savaData(params)
    },
    async savaData(params) {
      let res
      console.log(params)
      if(params.id){
        res = await authApi("sysOrganService","","updateEntity","",params)
      }else{
        res = await authApi("sysOrganService","","saveEntity","",params)
      }
      if (res.status == 200) {
        this.$vmNews('保存成功！', 'success')
        this.$nextTick(() => {
          this.$refs.customForm.resetForm('ruleForm')
        })
        this.initPage()
      }
    },
    personConfirmClick(val) {
      if (JSON.stringify(val) == "{}") {
        this.$vmNews('请选择人员信息！')
        return
      }
      this.$refs.customForm.getField('managerName', val.personName)
      this.$refs.customForm.getField('managerId', val.id)
      this.$refs.basePerson.personDialog = false
    },
    handleConfirmClick(val) {
      this.$nextTick(() => {
        this.$refs.customForm.getField('parentOrgainName', val.label)
        this.$refs.customForm.getField('o_ParentOrganID', val.id)
      })

      this.$refs.baseOrganization.dialogVisible = false
    },

    getDelData(data) {
      let delD = []
      data.forEach(el => {
        if (this.delId == el.id) {
          this.delData = el
        }
        if (el.children != null && el.children && el.children.length) {
          this.getDelData(el.children)
        }
      })
      return this.delData
    },
    async OrganDel() {
      let params = {
        id: this.delId
      }
      this.delData = []
      this.getDelData(this.menuData)
      if (this.delData.children != null && this.delData.children && this.delData.children.length > 0) {
        this.$vmNews('存在子节点，不可以删除', 'error')
        return
      }
      let res = await authApi("sysOrganService","","deleteEntity","",params)
      if (res.status == 200) {
        this.$vmNews('删除成功', 'success')
        this.initPage()
        this.$nextTick(() => {
          this.$refs.customForm.resetForm('ruleForm')
        })
      }
    },
    // 操作按钮事件
    getFuncBtn(btnEven) {
      if (!this.delId && btnEven.menuName != '新增根节点') {
        this.$vmNews('请选择需要处理的信息！')
        return
      }
      if (btnEven.menuName === '新增根节点') { // 新增
        let newRuleForm = {
          parentOrganName: "",
          parentOrganId: 0
        }
        this.$nextTick(() => {
          this.$refs.customForm.resetForm('ruleForm')
          this.$refs.customForm.choiceAssignment(newRuleForm)
        })
      }
      if (btnEven.menuName === '新增子节点') { // 新增
        let newRuleForm = {
          parentOrganName: this.ruleForm.organName,
          parentOrganId: this.ruleForm.id,
        }
        this.$nextTick(() => {
          this.$refs.customForm.resetForm('ruleForm')
          this.$refs.customForm.choiceAssignment(newRuleForm)
        })
      }
      if (btnEven.menuName === '删除') { // 删除

        this.$confirm('确认删除该组织吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.OrganDel()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  },
}
</script>
<style lang="scss">
$activeColor: var(--bg-color, yellow);

.el-tree-node__content:hover,
.el-upload-list__item:hover {
  color: white;
  background-color: $activeColor !important;
}

.el-tree-node:focus>.el-tree-node__content {
  color: white;
  background-color: $activeColor !important;
}

.el-tree-node.is-current>.el-tree-node__content {
  color: white;
  background-color: $activeColor !important;
}
</style>
<style scoped lang="scss">
$activeColor: var(--bg-color, yellow);
::v-deep .baseNewFormBox{
  border:0px !important;
}
.content {
  --font-color: red;
  width: 100%;
  height: 200px;
  background-color: $activeColor;

  .title {
    background-color: white;
    color: var(--font-color);
  }

}

.form-control {
  ::v-deep .el-row {
    margin-right: 0px !important;
  }
}
</style>
